<template>
  <span>
    <el-button :type="type" :icon="icon" round size="medium" @click="doFunc"></el-button>
    <DialogFormCpt :dialog-visible="showDialog" :title="title" :content="content" :url="url"
                   :method="method" @close="closeDialog" @doSubmit="refresh">
      <slot></slot>
    </DialogFormCpt>

  </span>
</template>

<script>
import DialogFormCpt from './DialogFormCpt';
import {get} from '../components/HttpUtil'

export default {
  name: 'ButtonCpt',
  components: {DialogFormCpt},
  props: {
    type: '',
    icon: '',
    title: '',
    url: '',
    content: {},
    method: '',
    selected: []

  },
  data() {
    return {
      showDialog: false,

    }
  },
  methods: {
    doFunc() {
      var flag = true
      switch (this.method) {
        case 'post':
          this.$emit('reset-post-content')
          break
        case 'update':
          this.url = this.url + this.selected[0].id
          get(this.url, this.$store.state.token).then(res => {
            this.$emit('echo', res.data)
          })

        case 'delete':
          if (this.selected.length == 0) {
            this.$message({
              showClose: true,
              message: '未选中',
              type: 'warning'
            })
            flag = false
          } else if (this.selected.length > 1) {
            this.$message({
              showClose: true,
              message: '选中多条',
              type: 'warning'
            })
            flag = false
          } else {
            console.log(this.selected[0].id)
          }
          break
      }
      if (flag) {
        this.showDialog = true
      }

    },
    closeDialog(data) {
      this.showDialog = data
    },

    refresh() {
      this.$emit('refresh')
    }
  },

  watch: {
    dataSource:{
      immediate: true,
      handler(val){
        this.content = val
      }
    }
  }

}
</script>

<style scoped>

</style>
